<template>
  <Dialog ref="dialog" title="分配" width="600">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      status-icon
      v-loading="isRequest"
    >
      <div class="alitem center" style="min-height: 150px">
        <el-form-item label="分配给" prop="selTeacherIndex">
          <!-- 解决控制台报错 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="ruleForm.selTeacherIndex"
            placeholder="请选择老师"
            style="width: 200px"
          >
            <el-option
              v-for="(item, index) in teacherArr"
              :key="index"
              :label="item.realName"
              :value="index"
            />
          </el-select>
        </el-form-item>
      </div>

      <el-form-item style="width: 100%" class="btns-box">
        <el-button @click="closeChange">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </el-form-item>
    </el-form>
  </Dialog>
</template>
<script setup>
import Dialog from '@/components/Dialog/Dialog.vue';
import { ref, reactive } from 'vue';
import { tzyOrdersCreate } from '@/api/leader/Filling.js';
import { ElMessage } from 'element-plus';
import { userCreate } from '@/api/manage/manage.js';

const emit = defineEmits(['refreshList']);

const props = defineProps({
  teacherArr: {
    type: Array,
    default: [],
  },
  selStudentArr: {
    type: Array,
    default: [],
  },
  isUserList: {
    type: Boolean,
    default: false,
  },
});

const ruleForm = reactive({
  selTeacherIndex: null,
});

const rules = reactive({
  selTeacherIndex: [
    {
      required: true,
      message: '请选择老师',
      trigger: 'change',
    },
  ],
});

const dialog = ref(null);
const ruleFormRef = ref(null);
// 父级传递的学生数据
const isRequest = ref(false);

function openChange() {
  // 打开组件弹窗
  ruleForm.selTeacherIndex = null;
  dialog.value.openChange();
}

function closeChange() {
  dialog.value.closeChange();
}

function submitForm(formEl) {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      let data = {};

      let studentIds = [];
      props.selStudentArr.forEach((item) => {
        studentIds.push(item.id);
      });

      let teacher = props.teacherArr[ruleForm.selTeacherIndex];

      data['id'] = studentIds.toString();
      data['teacherId'] = teacher.id;
      data['teacher'] = teacher.realName;

      isRequest.value = true;

      if (props.isUserList) {
        userCreate(data)
          .then(() => {
            ElMessage({
              message: '跟换老师成功',
              type: 'success',
            });

            isRequest.value = false;
            emit('refreshList');
            dialog.value.closeChange();
          })
          .catch(() => {
            isRequest.value = false;
          });
      } else {
        // 更新用户信息
        tzyOrdersCreate(data)
          .then(() => {
            ElMessage({
              message: '跟换老师成功',
              type: 'success',
            });

            isRequest.value = false;
            emit('refreshList');
            dialog.value.closeChange();
          })
          .catch(() => {
            isRequest.value = false;
          });
      }
    } else {
    }
  });
}

defineExpose({
  openChange,
});
</script>
<style lang="scss" scoped></style>
<style>
.btns-box .el-form-item__content {
  justify-content: flex-end;
}
/* .el-form-item__content {
		justify-content: flex-end;
	} */
</style>
